/**
  境外合作院校管理
*/
<template>
    <div>
        <condition-card
            @reset="reset"
            @search="onSubmit"
            label-position="right"
            label-width="150px"
        >
            <el-row :gutter="24" style="height: 50px;">
                <el-col :span="8">
                    <el-form-item :label="$t('overseasInstitutions.country')">
                        <el-select
                            filterable
                            v-model="queryForm.condition.nationId"
                            :placeholder="$t('common.pla.pleaseSelect')"
                            clearable
                            style="width: 100%;"
                        >
                            <el-option
                                v-for="item in options.regionList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
        </condition-card>
        <el-card shadow="never" v-loading="loading" body-style="padding: 24px;" class="card-margin">
            <h1 class="condition-title">{{$t('overseasInstitutions.exchangeUniversity')}}</h1>
            <div class="float-left associated-conditional-input">
                <KeywordInput
                    v-model="queryForm.condition.college"
                    :placeholder="$t('overseasInstitutions.pleaseEnterSchool')"
                    @enter="onSubmit"
                />
            </div>
            <div class="edu-opertion-bar sub-title">
                <div class="float-right" style="display: flex;">
                    <el-button
                        type="danger"
                        @click="batchDeleteClick()"
                    >{{$t('overseasInstitutions.delete')}}</el-button>
                    <el-dropdown placement="bottom-start" trigger="click" @command="leadFile">
                        <el-button type="primary">
                            {{$t('internship.lead')}}
                            <i class="el-icon-arrow-down el-icon--right"></i>
                        </el-button>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="导入">{{$t('internship.lead')}}</el-dropdown-item>
                            <el-dropdown-item command="下载">{{$t('internship.download')}}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <el-upload
                        v-model="dialogForm.file"
                        class="upload-demo"
                        action="/api/externalexchangeservice/overseasCollege/importOverseasCollege"
                        :auto-upload="true"
                        :before-upload="beforeUpload"
                        :on-success="changeSuccess"
                        :limit="3"
                        :file-list="fileList"
                        style="display: none;"
                    >
                        <span slot="trigger" ref="importBtn">{{$t('graduate.clickUpload')}}</span>
                    </el-upload>
                    <el-button
                        style="margin-left:10px"
                        type="primary"
                        @click="exportToExcel"
                    >{{$t('internship.derive')}}</el-button>
                    <el-button type="primary" @click="exportAdd">{{$t('overseasInstitutions.add')}}</el-button>
                </div>
            </div>
            <edu-table
                :pagination="false"
                ref="mainTable"
                :tooltipEffect="tooltipEffect"
                stripe
                :data="dataList"
                size="mini"
                @selection-change="handleSelectionChange"
            >
                <edu-table-column
                    :label="$t('overseasInstitutions.schoolNumber')"
                    prop="collegeCode"
                ></edu-table-column>
                <edu-table-column :label="$t('overseasInstitutions.schoolName')" prop="collegeName"></edu-table-column>
                <edu-table-column
                    :label="$t('overseasInstitutions.schoolNameEn')"
                    prop="collegeNameEn"
                ></edu-table-column>
                <edu-table-column
                    :label="$t('overseasInstitutions.countryRegion')"
                    prop="nationName"
                ></edu-table-column>
                <edu-table-column
                    :label="$t('overseasInstitutions.ourUniversity')"
                    prop="cooperationFlag"
                >
                    <template slot-scope="props">
                        <span v-if="props.row.cooperationFlag == '0'">否</span>
                        <span v-if="props.row.cooperationFlag == '1'">是</span>
                    </template>
                </edu-table-column>
                <edu-table-column :label="$t('overseasInstitutions.operate')" fit width="150">
                    <template slot-scope="props">
                        <el-button
                            type="text"
                            @click="editOutline(props.row)"
                        >{{$t('overseasInstitutions.edit')}}</el-button>
                        <el-button
                            type="text"
                            @click="deleteOne(props.row)"
                        >{{$t('overseasInstitutions.delete')}}</el-button>
                    </template>
                </edu-table-column>
            </edu-table>
            <el-row type="flex" class="row-bg" justify="end">
                <el-col>
                    <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="queryForm.pageNum_"
                        :page-sizes="[20, 40, 80, 100]"
                        :page-size="queryForm.pageSize_"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="queryForm.total_"
                        style="float:right;margin-top:10px"
                    ></el-pagination>
                </el-col>
            </el-row>
        </el-card>
        <el-dialog
            @close="dataObjit={}"
            :before-close="beforeClose"
            :title="titleList"
            width="40%"
            :visible.sync="addflag"
            :show-close="beforeClose"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <overseasInstitutionsAdd
                ref="addform"
                @cancel-dialog="changeClose"
                :dataQueryForm="dataQueryForm"
                :showFlag="addflag"
                :dataProp="dataProp"
                :dataListProp="dataObjit"
                @close="(flag) => { addflag = flag }"
                @affirm-form="addrmForm"
            ></overseasInstitutionsAdd>
        </el-dialog>

        <edu-export-dialog
            :disabled="exportButton"
            :title="$t('message.prompt')"
            ref="downloadRef"
            :data="exportResult"
        ></edu-export-dialog>
    </div>
</template>
<script>
import { queryDic } from 'common/src/api/dictionary'
import UTILS from 'common/src/utils/utils'
import overseasInstitutionsAdd from 'common/src/views/switchAndResourceManagement/component/overseasInstitutionsAdd'
import graduateStudent from 'common/src/api/graduateStudent/graduateStudent'
import graduateStudentApi from 'common/src/api/graduateStudent/graduateStudent'
import templateApi from 'common/src/api/teachingEvaluation/template'
import interAcaConference from 'common/src/api/internationalCommunication/interAcaConference'
import { getALLCollege } from 'common/src/api/internationalExchanges/exchangeCollegeManagement'

export default {
    components: {
        overseasInstitutionsAdd
    },
    data() {
        return {
            indexKey: '1', // 面包屑
            title: '',
            titleList: '',
            fileList: [],
            category: { category: 1 },
            showDate: true,
            addflag: false,
            tableFlag: false,
            peopleadd: {},
            dataQueryForm: {},
            curRow: {},
            ifDetials: false,
            copyDialog: false,
            curCalendarId: '',
            isAllDel: true,
            exportButton: false,
            exportResult: null,
            checkTopicListForm: {
                dataList: []
            },
            multipleSelection: [],
            provideData: {}, // 提供子组件表格数据
            queryForm: {
                pageNum_: 1,
                pageSize_: 20,
                condition: {
                    nationId: '',
                    college: ''
                }
            },
            dialogForm: {
                file: ''
            },
            dataListProp: {},
            dataProp: '',
            copyTime: {
                time: ''
            },
            options: {
                facultys: [],
                timeList: [],
                title: [],
                sex: [],
                nationId: [],
                college: [],
                regionList: []
            },
            id: '',
            formsLearn: [],
            dataList: [],
            breadPath: {
                label: this.$t('graduate.graduate'),
                key: '1',
                children: [
                    {
                        key: '2',
                        label: ''
                    }
                ]
            }
        }
    },
    created() {
        this.postApproveAgree(this.queryForm)
    },
    filters: {
        isEnabled(val) {
            switch (val) {
                case 0:
                    return '停用'
                case 1:
                    return '启用'
                default:
                    return val
            }
        }
    },
    mounted() {
        this.getOptions()
        this.getColleges()
    },
    methods: {
        async getColleges() {
            let { code, data } = await getALLCollege()
            if (code !== 200) return
            this.options.regionList = data.list.map(item => {
                return {
                    value: item.id,
                    label: item.nameCN
                    // labelEN: item.nameEN
                }
            })
        },
        querySearchList(queryString, cb) {
            let restaurants = this.formsLearn
            let results = queryString
                ? restaurants.filter(this.createFilterList(queryString))
                : restaurants
            // 调用 callback 返回建议列表的数据
            cb(results)
        },
        createFilterList(queryString) {
            return restaurant => {
                return restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
            }
        },
        postApproveAgree(date) {
            interAcaConference.overseasCollege(date).then(res => {
                this.queryForm.pageNum_ = res.data.pageNum_
                this.queryForm.pageSize_ = res.data.pageSize_
                this.queryForm.total_ = res.data.total_
                this.dataList = res.data.list
            })
        },
        getOptions() {
            // 筛选条件字典查询
            let data = {
                lang: this.$store.getters.language || 'cn',
                type: 'allChild',
                keys: ['profession', 'G_XBIE', 'G_GJQU']
            }
            queryDic(data).then(res => {
                UTILS.fillSelect(
                    {
                        title: 'profession',
                        sex: 'G_XBIE',
                        nationId: 'G_GJQU' // 国别/地区
                    },
                    res.data,
                    this.options
                )
            })
        },
        changeClick(val) {
            this.options.title.forEach(el => {
                if (val === el.value) {
                    this.queryForm.condition.proTitle = el.label
                }
            })
        },
        // 导入
        leadFile(command) {
            if (command === '导入') {
                this.channel = true
                this.$refs.importBtn.click()
            } else if (command === '下载') {
                interAcaConference.downloadTemplate().then(res => {
                    this.$message(this.$t('internship.successfully'))
                })
            }
        },
        // 导入
        changeSuccess(res, file, fileList) {
            if (res.code == 200) {
                this.$message({
                    type: 'success',
                    message: this.$t('internship.successfully')
                })
                this.queryForm.pageNum_ = 1
                this.postApproveAgree(this.queryForm)
            } else if (res.msg) {
                this.$message({ type: 'info', message: res.msg })
            }
        },
        // 导出数据
        exportToExcel() {
            let projectIdList = []
            if (this.multipleSelection.length > 0) {
                projectIdList = this.multipleSelection.map(value => {
                    return value.id
                })
            }
            this.exportResult = null
            this.exportButton = true
            interAcaConference
                .overseasCollegeExcel({
                    id: projectIdList,
                    nationId: this.queryForm.condition.nationId,
                    college: this.queryForm.condition.college
                })
                .then(res => {
                    // if (res.code === 200) {
                    //     // let domIframe = document.createElement('iframe')
                    //     // domIframe.src =
                    //     //     '/api/externalexchangeservice/overseasCollege/downloadFile?path=' +
                    //     //     res.data
                    //     // domIframe.style.display = 'none'
                    //     // document.body.appendChild(domIframe)
                    //     this.$message.success('导出成功')
                    // } else {
                    //     this.$message.error('导出失败')
                    // }
                    this.$message.success('导出成功')
                    this.exportResult = ''
                    this.exportButton = false
                }).catch(err=> {
                    this.$message.error('导出失败')
                })
        },
        // 编辑
        exportEdit() {
            this.showDate = false
        },
        // 搜索/筛选
        onSubmit() {
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        // 新增
        exportAdd() {
            this.title = this.$t('graduate.add')
            this.dataProp = '新增'
            this.titleList = this.$t('graduate.add')
            this.dataQueryForm = this.queryForm
            this.addflag = true
        },
        // 批量删除
        batchDeleteClick() {
            let checkData = this.$refs.mainTable.getCheckData()
            if (checkData.length < 1) {
                this.$message.error(this.$t('请勾选数据'))
            } else {
                let param = checkData.map(item => {
                    return item.id
                })
                this.$delConfirm(this.$t('message.areYouSureDelete'), this.$t('message.prompt'), {
                    confirmButtonText: this.$t('message.confirm'),
                    cancelButtonText: this.$t('message.cancel'),
                    type: 'warning'
                }).then(() => {
                    interAcaConference.overseasCollegeDelete(param).then(res => {
                        if (res.code === 200) {
                            this.$message.success('删除成功')
                            this.onSubmit()
                        }
                    })
                })
            }
        },
        // 单个删除
        deleteOne(row) {
            this.$delConfirm().then(_ => {
                let param = [row.id]
                interAcaConference.overseasCollegeDelete(param).then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: this.$t('externamExchangeBase.operateSuccessfully')
                        })
                        this.onSubmit()
                    }
                })
            })
        },
        // 取消
        changeClose(param) {
            this.addflag = param
        },
        // 取消
        beforeClose(param) {
            this.$refs.addform.cancelDialog()
        },
        tableClose() {
            this.tableFlag = false
        },
        // 新增保存（编辑保存）
        addrmForm(param, data) {
            if (this.dataProp === '编辑') {
                interAcaConference.overseasCollegeEdit(param).then(res => {
                    this.$message.success(this.$t('internship.successfully'))
                    this.addflag = false
                    this.postApproveAgree(data)
                    this.$refs.addform.confirmInner()
                })
            } else if (this.dataProp === '新增') {
                interAcaConference.overseasCollegeAdd(param).then(res => {
                    this.$message.success(this.$t('internship.successfully'))
                    this.addflag = false
                    this.postApproveAgree(data)
                    this.$refs.addform.confirmInner()
                })
            }
        },
        addCancel(data) {
            this.addflag = data
        },

        getListData() {
            undergraduategraduateApi.getgraduateList(this.queryForm).then(res => {
                this.dataList = res.data.list
                this.queryForm.total_ = res.data.total_
            })
        },
        initOptions() {
            innovativeApi.getAllFaculty().then(res => {
                this.options.facultys = res.data.map(item => {
                    return {
                        label: item.deptName,
                        value: item.deptCode
                    }
                })
            })
        },

        handleSelectionChange(val) {
            this.multipleSelection = val
        },

        // 编辑
        editOutline(row) {
            let params = {
                id: row.id
            }
            interAcaConference.overseasCollegeDetail(params).then(res => {
                this.dataProp = '编辑'
                this.titleList = this.$t('graduate.edit')
                this.dataObjit = res.data
                this.dataQueryForm = this.queryForm
                this.addflag = true
            })
        },
        // 删除
        deteOutline(row) {
            this.$delConfirm(this.$t('您确定要删除吗？')).then(_ => {
                this.deleteBaseAssessSettingRow(row.id)
            })
        },
        deleteBaseAssessSettingRow(id) {
            graduateStudentApi
                .overseasCollegeDelete({
                    id: id
                })
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success(this.$t('common.tips.deleteSuccess'))
                        this.onSubmit()
                    }
                })
        },
        // 关闭弹框
        changeProp() {
            this.addflag = false
        },
        // 查看考核指标表
        indicatorsList() {},
        // 重置
        reset() {
            for (let key in this.queryForm.condition) {
                if (key !== 'category') {
                    this.queryForm.condition[key] = ''
                }
            }
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        // 保存
        conserve() {
            this.addflag = false
        },

        diaCancel() {
            this.$refs['copyTime'].resetFields()
            this.copyDialog = false
        },

        dialogClose() {
            this.copyDialog = false
            this.$refs['copyTime'].resetFields()
        },
        handleSizeChange(val) {
            this.queryForm.pageSize_ = val
            this.queryForm.pageNum_ = 1
            this.postApproveAgree(this.queryForm)
        },
        handleCurrentChange(val) {
            this.queryForm.pageNum_ = val
            this.postApproveAgree(this.queryForm)
        }
    }
}
</script>
<style lang="scss" scoped>
.condition-title {
    color: #2b3b4e;
    font-size: 18px;
    line-height: 24px;
    font-weight: bold;
}
.edu-page-title {
    span {
        line-height: 24px;
        display: inline-block;
        padding-right: 10px;
        font-size: 18px;
        font-weight: bold;
        color: #2b3b4e;
    }
}
.sub-title {
    margin: 16px 0;
    font-size: 16px;
    color: #000020;
    letter-spacing: 0;
}
.form-item {
    width: 312px;
    height: 32px;
    float: left;
    margin: 0px 10px;
}
.is-enabled-container ::v-deep {
    .el-button {
        cursor: auto;
    }
    .el-button--danger {
        padding: 9px 15px;
        min-width: 0;
    }
}
.inputBox {
    width: 240px !important;
    height: 32px !important;
}
.atooltip {
    background: beige;
    border: black;
}
</style>
